<!-- 列表的查询组件 -->
<template>
	<!-- 查询条件 -->
	<view class="search">
		<u-search
			style="background-color: rgba(0, 0, 0, 0.02);"
			:inputStyle="{marginLeft: '12rpx'}"
			shape="square" 
			:placeholder="placeholder"
			v-model="valueName"
			:show-action="false"
			@search="searchMsg"
			@clear="searchMsg"
			@blur="searchMsg"
			searchIconColor="#C6C6C6"
			placeholderColor="#C6C6C6"
			color="#7F7F7F"
			:clearabled="clearabled"
		>
		</u-search>
		<!-- 下拉选择 -->
		<view class="drop-down" @click="screenclick" v-if="isScreen">
			<view class="screen_left">
				筛选
			</view>
			<view class="screen_right">
				<u-icon :class="!screenShow?'right-icon':'right-icon-transform'" name="arrow-down-fill" color="#C6C6C6" size="24"></u-icon>
			</view>
		</view>
	</view>
</template>

<script>
	/**
	 * CommonSearch  列表的展示组件
	 * 
	 * @property {String}			placeholder       占位文字内容
	 * @property {String}			value       输入的内容
	 * @property {Boolean}			screenShow       控制筛选箭头
	 * 
	 * @event    {Function}        screenclick       点击筛选触发
	 */
	export default {
		data() {
			return {
				// 搜索的字段
				valueName: '', //所选id 值参数
			}
		},
		model: {
			prop: 'value',
			event: 'change'
		},
		props: {
			placeholder: {
				type: String,
				default: '请搜索'
			},
			clearabled: {
				type: Boolean,
				default: false
			},
			value: {
				type: [String, Number],
				default: '',
				required: true
			},
			screenShow: {
				type: Boolean,
				default: false
			},
			isScreen: {
				type: Boolean,
				default: false
			}
		},
		watch: {
			value: {
				handler (val) {
					this.valueName = val
				},
				immediate: true
			}
		},
		methods: {
			
			// 点击搜索
			searchMsg (item) {
				if (item) {
					this.$emit('change', item)
				} else {
					this.$emit('change', '')
				}
				this.$emit('searchMsg')
			},
			
			// 点击筛选
			screenclick () {
				this.$emit('screenclick')
			},
		}
	}
</script>

<style lang="scss" scoped>
	.search {
		width: 750rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background: #FFFFFF;
		padding: 10rpx 40rpx;
		box-sizing: border-box;
		.drop-down {
			margin-left: 20rpx;
			background: #FFFFFF;
			height: 60rpx;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			
			.screen_left {
				line-height: 60rpx;
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #7F7F7F;
				margin-right: 8rpx;
			}
			
			.screen_right {
				display: flex;
				align-items: center;
			
				.right-icon{
					transition: transform 0.5s;
					-moz-transition: -moz-transform 0.5s; /* Firefox 4 */
					-webkit-transition: -webkit-transform 0.5s; /* Safari 和 Chrome */
					-o-transition: -o-transform 0.5s;
					transform: rotate(180deg);
					-webkit-transform: rotate(0deg);
					-moz-transform: rotate(0deg);
					-o-transform: rotate(0deg);
				}
				.right-icon-transform{
					transition: transform 0.5s;
					-moz-transition: -moz-transform 0.5s; /* Firefox 4 */
					-webkit-transition: -webkit-transform 0.5s; /* Safari 和 Chrome */
					-o-transition: -o-transform 0.5s;
					transform: rotate(180deg);
					-webkit-transform: rotate(180deg);
					-moz-transform: rotate(180deg);
					-o-transform: rotate(180deg);
				}
			}
			
		}
	}
</style>